<template>
    <div class="common-tabs">
        <el-tabs v-model="supplier" @tab-click="handleClick">
            <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name"></el-tab-pane>
        </el-tabs>
    </div>

</template>

<script>
export default {
    name: 'CommonTabs',

    props: {
        tabList: {
            type: Array,
            default: () => []
        },
        value: [String, Number],

    },
    data() {
        return {

        };
    },
    computed: {
        supplier: {
            get() {
                return this.value;
            },
            set(v) {
                this.$emit('input', v);
            },
        },
    },
    mounted() {

    },

    methods: {
        handleClick() {

        }
    },
};
</script>

<style scoped lang="less">
.common-tabs {
    width: 100%;
    height: 55px;
    position: relative;

    .el-tabs {
        height: 100%;
        font-size: 16px;

        ::v-deep(.el-tabs__nav-wrap) {
            &::after {
                background-color: #DCDEE0;
                height: 1px;
            }
        }

        ::v-deep(.el-tabs__nav) {
            height: 54px;
            display: flex;
            align-items: center;
        }

        ::v-deep(.el-tabs__nav-scroll) {
            padding: 0 24px;
        }

        ::v-deep(.el-tabs__header) {
            height: 55px;
            margin: 0;
        }

        ::v-deep(.el-tabs__item.is-active) {
            color: #155BD4;
        }

        ::v-deep(.el-tabs__item) {
            font-size: 16px;
            font-weight: bolder;

            &:hover {
                color: #155BD4;
            }
        }

        ::v-deep(.el-tabs__active-bar) {
            background-color: #155BD4;
        }

        &.single {
            ::v-deep(.el-tabs__item.is-active) {
                color: #323233;
            }

            ::v-deep(.el-tabs__active-bar) {
                opacity: 0;
            }
        }
    }


}
</style>